<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现底部导航栏</title>
  <link rel="stylesheet" href="css/nav.css">
</head>
<body>
  <div id="app">
    <div class="content">
      <h1>主页内容</h1>
    </div>
    <nav-bar></nav-bar>
  </div>
  <template id="nav-bar-template">
    <div class="bottom-navbar">
      <nav-item v-for="tab in navTabs" :key="tab.title" :title="tab.title" :icon="tab.icon"></nav-item>
    </div>
  </template>
  <template id="nav-item-template">
    <div class="navbar-item">
      <img :src="icon" alt="">
      <span>{{ title }}</span>
    </div>
  </template>
  <script src="js/vue.js"></script>
  <script>
    const navItem = {
      template: '#nav-item-template',
      props: ['title', 'icon']
    };
    // 创建父组件
    const navBar = {
      template: '#nav-bar-template',
      components: {
        'nav-item': navItem
      },
      data() {
        return {
          navTabs: [{
              title: '首页',
              icon: 'images/nav-icon-home.png'
            },
            {
              title: '商品分类',
              icon: 'images/nav-icon-category.png'
            },
            {
              title: '购物车',
              icon: 'images/nav-icon-cart.png'
            },
            {
              title: '个人中心',
              icon: 'images/nav-icon-user.png'
            }
          ]
        };
      }
    };

    // 创建 Vue 实例，并将父组件注册到 Vue 实例中
    const app = new Vue({
      el: '#app',
      components: {
        'nav-bar': navBar
      }
    });
  </script>
</body>

</html>